import { Card, ColorPicker, Input, Button } from "antd";
import { useState } from "react";

import { uploadLog } from "@/api/api_upload";

const LogCard = () => {
  const [content, setContent] = useState<string>("");
  const [color, setColor] = useState<string>("#1677ff");

  const onChange = (e: any) => {
    setContent(e.target.value);
  };

  const selectColor = (e: any) => {
    setColor(e.toHexString());
  };

  const submit = async () => {
    //内容不为空
    if (content === "") {
      return;
    }
    const data = {
      content: content,
      color: color,
      time: Date.now(),
    };

    try {
      const res = await uploadLog(data);
      if (res.code === 200) {
        setContent("");
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <Card
        title="开发日志"
        extra={
          <Button onClick={submit} type="link" block>
            提交
          </Button>
        }
        style={{ width: 350 }}
      >
        <div style={{ display: "flex" }}>
          <ColorPicker
            onChangeComplete={selectColor}
            format="hex"
            value={color}
          />
          <Input
            style={{ marginLeft: 10 }}
            showCount
            maxLength={50}
            value={content}
            onChange={onChange}
          />
        </div>
      </Card>
    </>
  );
};

export default LogCard;
